<template>
  <div class="upload-excel">
    <el-dialog
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      title="会员导入"
      width="750px"
      @close="close"
    >
      <div v-loading="loading" class="dialog-upload-excel" element-loading-text="上传中">
        <!-- 批量导入说明 -->
        <div class="app-main-tips-box">
          <div class="title">
            <i class="el-icon-warning" /> 导入说明
          </div>
          <ul>
            <li>
              1.先下载EXCEL模板，按照要求填写后上传文档进行导入，
              <a class="btn" @click.prevent="downTemplate">
                <u>点击下载模板</u>
              </a> 。
            </li>
            <li>2.每次导入文件大小不能超过5M。</li>
            <li>3.不导入模板提供字段之外的数据。</li>
            <li>4.手机号码必填。</li>
            <li>5.会员卡类型为空或者不存在时自动跳转会员卡类型为最低级别会员卡。</li>
            <li>6.导入完成后，如果有错误行，请在任务列表下载错误数据，修改后再次导入。</li>
          </ul>
        </div>
        <div>
          <el-upload
            ref="upload"
            :action="actionUrl"
            :multiple="false"
            :limit="1"
            :headers="uploadHeaders"
            :on-success="handleExcelSuccess"
            :before-upload="beforeExcelUpload"
            class="upload-user"
            drag
          >
            <i class="el-icon-upload" />
            <div class="el-upload__text">
              将excel文件拖到此处，或
              <em>点击上传</em>
            </div>
          </el-upload>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { vipUploadUrl } from '@/api/upload'
export default {
  data() {
    return {
      resolve: null,
      reject: null,
      loading: false,
      dialogVisible: null,
      actionUrl: '',
      uploadHeaders: {}
    }
  },
  computed: {
    ...mapGetters(['fileBaseUrl'])
  },
  methods: {
    open() {
      this.show()
      return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
      })
    },

    show() {
      this.dialogVisible = true
      this.uploadHeaders = { 'X-BUSINESS-TOKEN': this.$store.state.user.token }
      this.actionUrl = vipUploadUrl
    },

    close() {
      this.loading = false
      this.$refs.upload.clearFiles()
    },

    hide() {
      this.resolve && this.resolve()
      this.resolve = null
      this.reject = null
      this.dialogVisible = false
    },

    // 下载模板
    downTemplate() {
      var alink = document.createElement('a')
      alink.href =
          this.fileBaseUrl + '/business/template/member_import_template.xlsx'
      alink.download = ''
      alink.click()
    },

    // 上传会员数据
    handleExcelSuccess(res, file) {
      this.loading = false
      if (res.code === 0) {
        this.$alert(
          '文件已上传，我们将为你导入文件的数据，具体结果请前往导入任务查看。',
          '提示',
          {
            confirmButtonText: '确定',
            center: true,
            type: 'success',
            callback: action => {
              this.hide()
            }
          }
        )
      } else {
        this.$refs.upload.clearFiles()
        this.$message.error(res.msg)
      }
    },

    // 导入预处理
    beforeExcelUpload(file) {
      if (this.beforeUploadExcel(file, this, 5)) {
        this.loading = true
        return true
      } else {
        return false
      }
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .upload-excel {
    .dialog-upload-excel {
      padding-bottom: 20px;
    }
    .upload-user {
      ::v-deep .el-upload {
        width: 100%;
        margin-top: 20px;
        .el-upload-dragger {
          width: 100%;
        }
      }
    }
  }
</style>
